<template>
    <view class='page'>
        <u-navbar class="gradient-bg" :title="title" navbarType="0" fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <view class="form box">
            <view class="evan-form-show">
                <evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="form" :rules="rules">
                    <evan-form-item label="服务名称" prop="name">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.name" placeholder="请输入服务名称" />
                    </evan-form-item>
                    <evan-form-item label="服务分类" prop="cate_name">
                        <picker class="picker" :range="cateList" range-key="name" :value="form.cate_name" @change="cateChange">
                            <view v-if="!form.cate_name" class="uni-input gray">请选择所属服务分类
                                <uni-icons style="margin-right:30rpx;" type="arrowright" color="#8f8f94" size="16" />
                            </view>
                            <view v-else class="uni-input">{{form.cate_name}}
                                <uni-icons style="margin-right:30rpx;" type="arrowright" color="#8f8f94" size="16" />
                            </view>
                        </picker>
                    </evan-form-item>
                    <evan-form-item label="列表价格" prop="show_price">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.show_price" placeholder="请输入列表显示价格" />
                    </evan-form-item>
                    <evan-form-item label="显示好评率" prop="evaluate_show">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.evaluate_show" placeholder="请输入显示好评率" />
                    </evan-form-item>
                    <!--上传图片  name="1"-->
                    <view class="upload-img">
                        <view class="img-title">
                            <span style="color:red;">* </span><text>上传封面</text><text style="color:#ff1f1f;margin-left: 6rpx;">(图片尺寸750*536)</text>
                        </view>
                        <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
                    </view>
                    <!--上传图片-->
                    <view class="upload-img">
                        <view class="img-title">
                            <span style="color:red;">* </span><text>上传轮播图</text><text style="color:#ff1f1f;margin-left: 6rpx;">(图片尺寸750*536)</text>
                        </view>
                        <!-- 多图仅支持图片 -->
                        <!-- <xzl-upload :show-progress="true" :upload-text="uploadText" multiple ref="uUpload" :header="header" :action="action" :auto-upload="true"
                            :max-size="2* 1024 * 1024" @on-change="onChoose" name="encryption" max-count="9" :fileList="fileList" @on-list-change="onListChange"
                            @on-uploaded="onUploaded" @on-progress="progress" @on-remove="remove" @befordelIndex="befordelIndex">
                        </xzl-upload> -->
                        <view >
                            <multifile-upload :max="6" v-model="fileList" mediaType="image" :maxSize="2" :chooseNum="9" :maxDuration="6" :sourceType="['album','camera']"
                                :compress="false" :quality="80" :limitWidth="limitWidth" :limitHeight="limitHeight" :formData="{'file': '123'}"
                                :remove="true" @uploadSuccess="fileUploadSuccess1" @imgDelete="fileImgDelete" @uploadFail="fileUploadFail" action="https://yl.weilankangyang.com/api/common/fileUpload"></multifile-upload>
                        </view>
                    </view>
                    <!-- <evan-form-item label="现价" prop="current_price">
                        <input type="number" class="form-input" placeholder-class="form-input-placeholder" @input="handNum" v-model="form.current_price"
                            placeholder="请输入现价" />
                    </evan-form-item> -->
                    <!-- <evan-form-item label="原价" prop="original_cost">
                        <input type="number" class="form-input" placeholder-class="form-input-placeholder" @input="handNum1" v-model="form.original_cost"
                            placeholder="请输入原价" />
                    </evan-form-item> -->
                    <!-- <evan-form-item label="服务时长" prop="service_duration">
                        <input type="number" class="form-input" placeholder-class="form-input-placeholder" @input="handNum2" v-model="form.service_duration"
                            placeholder="请输入服务时长" />
                        <span style="width:120rpx;">分钟</span>
                    </evan-form-item> -->
                    <!-- <evan-form-item label="虚拟销量" prop="number_virtual">
                        <input type="number" class="form-input" placeholder-class="form-input-placeholder" @input="handNum3" v-model="form.number_virtual"
                            placeholder="请输入虚拟销量" />
                    </evan-form-item> -->
                    <view class="tit box">
                        服务规格<text class="red"> (必填,规格填写后尽量不要再次修改)</text>
                    </view>
                    <zb-table ref="zbTable" :show-header="true" :columns="column" :stripe="true" :isSingle="true" :fit="false" @rowClick="rowClick"
                        @toggleRowSelection="toggleRowSelection" @toggleAllSelection="toggleAllSelection" :border="true" @edit="buttonEdit" @dele="dele" :data="data"></zb-table>
                    
                    <view class="addBtn box">
                        <view class="operate">
                            <view class="op">
                                <u-button @click="editSpecify" :disabled="disabled" type="warning">编辑</u-button>
                            </view>
                            <view class="op">
                                <u-button @click="delSpecify" :disabled="disabled" type="error">删除</u-button>
                            </view>
                        </view>
                        <view class="operate add">
                            <view class="op">
                                <u-button type="success" @click="addSpecify">添加服务规格</u-button>
                            </view>
                        </view>
                    </view>
                    
                    <evan-form-item label="服务介绍" prop="content" style="border-bottom: none;"> <text style="color:#ff1f1f;font-size:28rpx;font-weight: 500;">(图片宽度750)</text>
                        <!-- <textarea v-model="form.content" placeholder="请输入服务介绍"></textarea> -->
                        <!-- <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.content" placeholder="请输入服务介绍" /> -->
                    </evan-form-item>
                    <!--  <rich-text v-if="form.content" :nodes="form.content"></rich-text>
                    <textarea v-model="form.content" placeholder="请输入服务介绍"></textarea> -->
                    <view class="feedback-data">
                        <view>
                            <u-icon name="photo" size=36 @click="selectImages"></u-icon>

                        </view>
                        <view class="container">
                            <editor id="editor" class="ql-container" :placeholder="placeholder" :show-img-size="true" :show-img-toolbar="true"
                                :show-img-resize="true" @ready="onEditorReady" :read-only="false" @statuschange="statusChange" v-model="form.content"></editor>
                        </view>
                    </view>
                    <view class="btn box">
                        <view class="padding flex flex-direction">
                            <button @click="submit()" class="cu-btn bg-blue margin-tb-sm lg">提交</button>
                            <!-- <button style="margin-top: 30rpx;" v-if="form.service_code" @click="show=true"
                                class="cu-btn bg-blue margin-tb-sm lg">下架</button> -->
                        </view>
                    </view>
                </evan-form>
            </view>
        </view>
        

        <!-- <u-modal :show="show" title="提示" content="您确定要下架此服务吗？" showCancelButton @cancel="show=false"
            @confirm="unbinding" :asyncClose="true"></u-modal> -->
        <quick-message ref="message"></quick-message>
    </view>
</template>

<script>
import {
    getCatesLists,
    setServiceInfo,
    getServiceInfo
} from "@/api/service.js"
import {
    uploadImg
} from "@/api/index.js"
export default {
    components: {},
    data() {
        return {
            // 表单的内容必须初始化
            form: {
                name: '',
                cate_id: '',
                cate_name: '',
                service_code: '',
                items: '',
            },
            rules: {
                name: {
                    required: true,
                    message: '请输入姓名'
                },
                cate_name: {
                    required: true,
                    message: '请选择服务分类'
                },
                show_price: {
                    required: true,
                    message: '请输入列表显示价格'
                },
                evaluate_show: {
                    required: true,
                    message: '请输入显示好评率'
                },
            },
            loading: true,
            cateList: [],
            // show: false,
            // type: '',//1提现时选择银行卡过来添加
            fileList: [],
            fileList1: [],
            title: '添加服务',
            limitWidth: 750,
            limitHeight: 536,
            placeholder: '开始输入...',
            column: [
                { type: 'selection', fixed: true, width: 50 },
                { name: 'service_spec', label: '规格名', fixed: true, width: 120, align: "center", },
                { name: 'current_price', label: '现价（元）', sorter: false, align: "center" },
                { name: 'original_price', label: '原价（元）', align: "center" },
                { name: 'unit', label: '单位', align: "center" },
                { name: 'service_duration', label: '服务时长（分钟）', width: 125, align: "center" },
                { name: 'virtual_sales', label: '虚拟销量（个）', width: 125, align: "center" },
                { name: 'status', label: '是否可显示', filters: { 0: '否', 1: '是' }, align: "center" },
                // {
                //     name: 'operation', type: 'operation', fixed: false, width: 160, align: "center", label: '操作',
                //     renders: [
                //         {
                //             name: '编辑',
                //             func: 'edit'
                //         },
                //         {
                //             name: '删除',
                //             type: 'warn',
                //             func: "dele"
                //         },
                //     ]
                // },
            ],
            data: [
                {
                    checked: false,
                    service_sku: '',
                    service_spec: '',
                    current_price: "",
                    original_price: '',
                    unit: '',
                    service_duration: '',
                    virtual_sales: '',
                    status: '',
                }
            ],
            selectRow: {},
            disabled: true,
            toastText: ''
        };
    },
    onLoad(query) {
        this.getList()
        if (query) {
            // if (query.type) {
            //     this.type = query.type
            // }
            if (query.data) {
                let data = JSON.parse(decodeURIComponent(query.data))
                console.log(data, "data,666")
                this.form.service_code = data.code
                getServiceInfo({
                    service_code: this.form.service_code
                }).then(res => {
                    this.form = res.data
                    this.form.items.forEach(element => {
                        element.checked = false
                    });
                    this.data = this.form.items
                    this.form.content = this.form.content.replace(/\<img/g,
                        "<img style='width: 100%;;height: auto;display: block;'")
                    this.form.service_code = res.data.code
                    this.form.cate_name = this.cateList.find(item => item.id == res.data.cate_id).name
                    this.fileList = this.form.slider_pict
                    this.fileList1.push({
                        url: this.form.cover_pict
                    })
                })
                this.title = "编辑服务"
            }
        }
        this.$bus.$on('updateTabList', this.updateTabList)
    },
    onUnload() {
        uni.$off('updateTabList')
    },
    onShow() {
        // this.getList()
    },
    mounted() {
        // 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        getList() {
            getCatesLists().then(res => {
                this.cateList = res.data
            })
        },
        addSpecify() {
            this.selectRow = {}
            this.disabled = true
            this.data.push(
                {
                    checked: false,
                    service_sku: '',
                    service_spec: '',
                    current_price: "",
                    original_price: '',
                    unit: '',
                    service_duration: '',
                    virtual_sales: '',
                    status: '',
                }
            )
        },
        editSpecify() {
            console.log(111)
            uni.navigateTo({
                url: '/pagesB/addService/service-specify?dataList=' + encodeURIComponent(JSON.stringify(this.selectRow)),
            })
        },
        delSpecify() {
            this.data.splice(this.selectRow.key, 1)
            this.selectRow = {}
            this.disabled = true
        },
        updateTabList(val) {
            this.data.forEach(e => {
                this.$set(e, e.checked, false)
            });
            console.log(this.data, "this.datathis.data")
            this.$set(this.data, this.selectRow.key, val);
            this.selectRow = {}
            this.disabled = true
        },
        rowClick(row, index) {
            console.log(row, index, "row ,indexrow ,index222")
        },
        toggleRowSelection(selected, array) {
            this.selectRow = array[0] ? array[0] : {}
            this.disabled = this.selectRow ? false : true
            console.log(this.selectRow, "this.selectRow444")
        },
        toggleAllSelection(selected, array) {
            console.log(selected, array, "all")
        },
        buttonEdit(e) {
            console.log(e, "eee")
        },
        dele(e) {
            console.log(e, "e")
        },
        cateChange(e) {
            let index = e.detail.value
            this.form.cate_id = this.cateList[index].id
            this.form.cate_name = this.cateList[index].name
        },
        fileUploadSuccess1(res) { //上传成功
            /****************
            因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
            ***************/
            var _res = JSON.parse(res.data);
            console.log('_res', _res)
            if (_res.code == 1) {
                this.fileList.push(_res.data[0].fileurl);
            }
            /*******************************/
        },
        fileImgDelete(e) {
            console.log('fileImgDelete', e)
        },
        fileUploadFail(err) { //上传失败
            console.log('err', err)
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1)
        },
        // 新增图片
        async afterRead(event) {
            // When multiple is true, event.file is an array; otherwise, it's an object
            let lists = [].concat(event.file);
            let fileListLen = this[`fileList${event.name}`].length;
            for (let i = 0; i < lists.length; i++) {
                const file = lists[i];
                const imageInfo = await this.getImageInfo(file.url);
                const maxWidth = this.limitWidth;
                const maxHeight = this.limitHeight;
                if (imageInfo.width != maxWidth && imageInfo.height != maxHeight) {
                    this.$message(`请上传图片尺寸为宽度${maxWidth}px高度为${maxHeight}px的图片`);
                    return
                }
                this[`fileList${event.name}`].push({
                    ...file,
                    status: 'uploading',
                    message: '上传中'
                });

                const result = await this.uploadFilePromise(file.url);

                let item = this[`fileList${event.name}`][fileListLen];
                this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }));
                fileListLen++;
            }
        },
        getImageInfo(url) {
            return new Promise((resolve, reject) => {
                uni.getImageInfo({
                    src: url,
                    success: (info) => {
                        resolve(info);
                    },
                    fail: (error) => {
                        reject(error);
                    }
                });
            });
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: 'https://yl.weilankangyang.com/api/common/fileUpload', // 仅为示例，非真实的接口地址
                    filePath: url,
                    name: 'file',
                    formData: {
                        user: 'test'
                    },
                    success: (res) => {
                        setTimeout(() => {
                            resolve(res.data.data)
                            var feng = JSON.parse(res.data);
                            this.form.cover_pict = feng.data[0].fileurl
                            console.log(this.form.cover_pict, '热身赛所所所所所所所所所所所所所所所所·')
                        }, 1000)
                    }
                });
            })
        },

        unbinding() {
            delAccount({
                account_id: this.form.account_id
            }).then(res => {
                if (res.code == 1) {
                    this.$message("操作成功")
                    this.show = false
                    uni.navigateTo({
                        url: '/pagesB/withdrawal/bankCard'
                    })
                }
            })
        },
        // @ready
        onEditorReady(e) {
            uni.createSelectorQuery()
                .in(this)
                .select('#editor')
                .fields({
                    size: true,
                    context: true
                },
                    res => {
                        this.editorCtx = res.context;
                        this.editorCtx.setContents({
                            html: this.form.content
                        });
                    }
                )
                .exec();
        },
        // 选择图片 // 点击图片后可显示删除按钮 // 点击图片后可显示工具栏 // 点击图片后可显示缩放功能 // 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
        selectImages() {
            let image;
            let that = this;
            uni.chooseImage({
                count: 1, // 限制1次只能选择1张
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: function (res) {
                    image = res.tempFilePaths[0];
                    // uploadImg(image).then((res)=>{
                    //     console.log(res.data[0].fileurl,'返回数据')
                    //     let uploadUrl = res.data[0].fileurl
                    //     console.log(uploadUrl)
                    //     uni.hideLoading();
                    //     that.editorCtx.insertImage({
                    //         src: uploadUrl, // 此处实际需要先上传到服务器，获得真实地址后再插入到编辑器中，否则需要发布到后台时自行过滤、替换
                    //         alt: '图片',
                    //         success: function(e) {}
                    //     });
                    // }
                    // )
                    uni.uploadFile({
                        url: 'https://yl.weilankangyang.com/api/common/fileUpload', //仅为示例，非真实的接口地址
                        filePath: image,
                        name: 'file',
                        fileType: 'image',
                        formData: {
                            uploadpath: 'file',
                            filename: 'file'
                        },
                        success: res => {
                            let uploadRes = JSON.parse(res.data);
                            let uploadUrl = uploadRes.data[0].fileurl
                            console.log(uploadUrl)
                            uni.hideLoading();
                            // this.editorCtx.insertImage({
                            //     src: uploadUrl ,
                            //     alt: '图像',
                            //     success: function() {
                            //         console.log('insert image success')
                            //     }
                            // })
                            // 上传完成后插入到内容中
                            that.editorCtx.insertImage({
                                src: uploadUrl, // 此处实际需要先上传到服务器，获得真实地址后再插入到编辑器中，否则需要发布到后台时自行过滤、替换
                                alt: '图片',
                                success: function (e) { }
                            });
                        }
                    });
                },
            });
        },
        statusChange(e) {
            console.log(e, 'fuwenben')
        },
        setBold() {
            this.editorCtx.format('bold');
        },
        setHeader() {
            that.editorCtx.format('header', 'H3');
        },
        setLeft() {
            this.textFormat.align = 'left';
            this.editorCtx.format('align', this.textFormat.align == 'left' ? 'left' : false);
        },
        setCenter() {
            this.textFormat.align = 'center';
            this.editorCtx.format('align', this.textFormat.align == 'center' ? 'center' : false);
        },
        setRight() {
            this.textFormat.align = 'right';
            this.editorCtx.format('align', this.textFormat.align == 'right' ? 'right' : false);
        },
        // onEditorReady() {
        // 			    // #ifdef MP-BAIDU
        // 			    this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
        // 			    // #endif

        // 			    // #ifdef APP-PLUS || H5 ||MP-WEIXIN
        // 			    uni.createSelectorQuery().select('#editor').context((res) => {
        // 			      this.form.content = res.context
        // 			    }).exec()
        // 			    // #endif
        // 			},
        // 			undo() {
        // 				this.editorCtx.undo()
        // 			},
        showToast() {
            this.$refs.message.show({
                msg: this.toastText,
                type: "error",
            });
        },
        checkSpecify() {
            return new Promise((resolve, reject) => {
                console.log(this.data, "this.data.")
                if (this.data.length == 0) {
                    this.toastText = "请填写服务规格";
                    this.showToast();
                    reject();
                } else {
                    if (this.data.find(item => item.service_spec == '')) {
                        this.toastText = "请填写服务规格中的规格名";
                        this.showToast();
                        reject();
                    } else if (this.data.find(item => item.current_price == '')) {
                        this.toastText = "请填写服务规格中的现价";
                        this.showToast();
                        reject();
                    } else if (this.data.find(item => item.original_price == '')) {
                        this.toastText = "请填写服务规格中的原价";
                        this.showToast();
                        reject();
                    } else if (this.data.find(item => item.unit == '')) {
                        this.toastText = "请填写服务规格中的单位";
                        this.showToast();
                        reject();
                    } else if (this.data.find(item => item.service_duration === '')) {
                        this.toastText = "请填写服务规格中的服务时长";
                        this.showToast();
                        reject();
                    } else if (this.data.find(item => item.virtual_sales == '')) {
                        this.toastText = "请填写服务规格中的虚拟销量";
                        this.showToast();
                        reject();
                    }

                }
                resolve()
            })
        },
        submit() {
            Promise.all([
                this.$refs.form.validate(),
                this.checkSpecify()
            ]).then(() => {
                this.form.service_code = this.form.service_code ? this.form.service_code : ''
                this.form.slider_pict = this.fileList.length > 0 ? this.fileList.join(
                    "|") : ""
                this.editorCtx.getContents({
                    success: (res) => {
                        // console.log(res, '富文本内容')
                        this.form.items = JSON.stringify(this.data)
                        this.form.content = res.html
                        console.log(this.form.content, '富文本内容')
                        setServiceInfo(this.form).then(res => {
                            if (res.code == 1) {
                                this.$message("操作成功")
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url: '/pagesB/service/service'
                                    })
                                }, 500)
                            }
                        })
                    }
                })
            }).catch((err) => {

            })
        },
    },
};
</script>
<style scoped lang='scss'>
.page {
  .form {
    background-color: #fff;
    border-radius: 5rpx;
    margin: 20rpx auto;

    .evan-form-show {
      padding: 0 20rpx 20rpx;

      .form-input {
        font-size: 28rpx;
        color: #333;
        // text-align: right;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        height: 100rpx;
        line-height: 50rpx;
        // text-indent: 36rpx;

        &.textarea {
          height: 240rpx;
          padding: 24rpx 0;
          text-align: center;
          margin-top: 25rpx;
        }
      }

      .evan-form-item-container__label {
        width: 140rpx;
      }

      .form-input-placeholder {
        font-size: 28rpx;
        color: #999;
      }

      &__button {
        width: 100%;
        height: 88rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 36rpx;
        color: #fff;
        margin-top: 20rpx;
        background-color: #2d87d5;

        &::before,
        &::after {
          border: none;
        }
      }

      .customize-form-item {
        &__label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
        }

        &__radio {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          &__text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }

    .picker {
      //   flex: 1;
      //   text-align: left;
      //   line-height: 45rpx;
      //   text-indent: 36rpx;

      //   .uni-input {
      //     display: flex;
      //     justify-content: space-between;
      //     align-items: center;
      //   }
      .gray {
        font-size: 28rpx;
        color: #777;
      }
    }

    picker {
      flex: 1;
      height: 87rpx;
      line-height: 87rpx;

      uni-icons {
        float: right;
        margin-right: 20rpx;
      }
    }

    /deep/.evan-form-item-container__label {
      font-size: 28rpx;
      color: #333333;
      width: 180rpx;
      text-align: justify;
      text-align-last: justify;
      padding-right: 36rpx;
      line-height: 50rpx;
    }

    .feedback-data {
      // height: 600rpx;
      /* margin: 20rpx auto; */
      background-color: #ffffff;
      border-radius: 20rpx;

      .content {
        padding: 20rpx;
        /*        #editor {
        		width: 100%;
        		height: 300px;
        		background-color: #CCCCCC;
        	} */

        textarea {
          width: 96%;
          height: 320rpx;
          background-color: #f6f6f6;
          border-radius: 20rpx;
          padding: 20rpx;
          font-size: 26rpx;
          color: #222222;
        }
      }
    }

    /*上传图片*/
    .upload-img {
      /* padding: 0 30rpx; */
      margin: 20rpx auto;
      background-color: #ffffff;
      border-radius: 20rpx;

      .img-title {
        display: flex;
        align-items: center;
        /* padding-left:-30rpx; */
        width: 100%;
        height: 80rpx;

        text {
          font-size: 26rpx;
          color: #222222;
        }
      }

      .img-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        height: 200rpx;

        .list {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 23%;
          height: 160rpx;
          margin-right: 2%;

          image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
          }

          text {
            position: absolute;
            right: -10rpx;
            top: -20rpx;
            font-size: 34rpx;
            color: #707070;
          }
        }

        .list:nth-child(4n) {
          margin-right: 0;
        }

        .up-img {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24%;
          height: 160rpx;
          box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
          border-radius: 10rpx;
          margin-right: 2%;

          image {
            width: 60rpx;
            height: 60rpx;
          }
        }
      }
    }
  }
  .tit {
    font-size: 28rpx;
    font-weight: 600;
    padding-bottom: 30rpx;
    &::before {
      content: "*";
      color: #ff1f1f;
    }
    .red {
      color: #ff1f1f;
    }
  }
  .addBtn {
    padding: 30rpx 0;
    overflow: hidden;
    .operate {
      width: 100%;
      height: 60rpx;
      display: flex;
      .op {
        width: 220rpx;
        height: 60rpx;
        margin-right: 30rpx;
      }
    }
    .add {
      padding-top: 30px;
    }
  }
  .btn {
    margin: 40rpx auto;
    button {
      background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
        linear-gradient(#ff6a00, #ff6a00);
      background-blend-mode: normal, normal;
      color: #ffffff;
    }
  }
}
</style>